<template>
  <div class="started_page">
    <van-nav-bar title="我发起的"
                 left-arrow
                 @click-left="onClickLeft()"
                 right-text="分享"
                 @click-right="onClickRight()"
    />
    <van-tabs v-model="activeName">
      <van-tab title="进行中" name="a">
        <div class="tab_content">
          <card-item v-for="(items, index) in startedInfo"
                     :key="index"
                     :is-editor="isEditor"
                     :active-title="items.title || '幸运大抽奖'"
                     :active-start-date="items.startTime.split(' ')[0]"
                     :active-end-date="items.endTime.split(' ')[0]"
                     :activeState="status[items.status]"
                     :id="items.id"
          ></card-item>
        </div>
      </van-tab>
      <van-tab title="已结束" name="b">
        <div class="tab_content">
          <card-item v-for="(items, index) in endedInfo"
                     :key="index"
                     :is-editor="isEditor"
                     :active-title="items.title || '幸运大抽奖'"
                     :active-start-date="items.startTime.split(' ')[0]"
                     :active-end-date="items.endTime.split(' ')[0]"
                     :activeState="status[items.status]"
                     :id="items.id"
          ></card-item>
        </div>
      </van-tab>
      <van-tab title="审核中" name="c">
        <div class="tab_content">
          <card-item v-for="(items, index) in review"
                     :key="index"
                     :is-editor="isEditor"
                     :active-title="items.title || '幸运大抽奖'"
                     :active-start-date="items.startTime.split(' ')[0]"
                     :active-end-date="items.endTime.split(' ')[0]"
                     :activeState="status[items.status]"
                     :id="items.id"
          ></card-item>
        </div>
      </van-tab>
      <van-tab title="审核失败" name="d">
        <div class="tab_content">
          <card-item v-for="(items, index) in auditFailure"
                     :key="index"
                     :is-editor="isEditor"
                     :active-title="items.title || '幸运大抽奖'"
                     :active-start-date="items.startTime.split(' ')[0]"
                     :active-end-date="items.endTime.split(' ')[0]"
                     :activeState="status[items.status]"
                     :id="items.id"
          ></card-item>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import CardItem from "./components/CardItem";
import {NavBar, Dialog, Tab, Tabs} from "vant";
import {mylucky} from "@/api/lucky";

export default {
  name: "Started",
  components: {
    [NavBar.name]: NavBar,
    Dialog,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    CardItem
  },
  data() {
    return {
      isEditor: false,
      activeName: "a",
      startedInfo: [],
      endedInfo: [],
      review: [],
      auditFailure: [],
      allInfo: [],
      status: ["审核中", "进行中", "已结束", "审核失败"]
    }
  },
  created() {
    mylucky({pageNum: 1, pageSize: 999}).then(res => {
      const {list} = res.data;
      console.log(list)
      this.allInfo = list.map(item => {
        switch (item.status) {
          case 0:
            this.review = [...this.review, item]
            break
          case 1:
            this.startedInfo = [...this.startedInfo, item]
            break
          case 2:
            this.endedInfo = [...this.endedInfo, item]
            break
          case 3:
            this.auditFailure = [...this.auditFailure, item]
            break
          default:
            break
        }
        return item
      });
    })

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.isEditor = !this.isEditor
    }
  }
}
</script>

<style scoped>
.started_page {
  background-color: rgb(247, 246, 251);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.tab_content {
  padding-top: 5px;
}
</style>
